<template>
	<view style="display: flex;flex-direction: column;align-items: center;width: 100%;" v-if="pageInit">
		<view class="headerWrapper">
			<view class="left">
				<view class="icon">
		
				</view>
				{{ loanTypeList[type].name }}
			</view>
			<view class="right">
				<view class="item" @click="tabsClick(0)" :class="{itemS: (active==0)}">
					等额本息
				</view>
				<view class="item" @click="tabsClick(1)" :class="{itemS: (active==1)}">
					等额本金
				</view>
			</view>
		</view>
		
		<view class="itemContainer">

			<view class="item">
				<view class="left">
					计算方式
				</view>
				<view class="middle">
					{{calculationTypeList[form.calculationTypeIndex].name }}
				</view>
			</view>

			<template v-if="form.calculationTypeIndex==0">
				<view class="item">
					<view class="left">
						房屋总价
					</view>
					<view class="middle">
						{{Number(form.totalPrice).toFixed(2) }}万元
					</view>
				</view>
				<view class="item">
					<view class="left">
						首付比例
					</view>
					<view class="middle">
						{{percentList[form.percentIndex].name}}
					</view>
				</view>
				<view class="item">
					<view class="left">
						首付金额
					</view>
					<view class="middle">
						{{(percentList[form.percentIndex].value*form.totalPrice).toFixed(2)}}万元
					</view>
				</view>
			</template>
			<template v-if="form.calculationTypeIndex==1">
				<view class="item">
					<view class="left">
						贷款总额
					</view>
					<view class="middle">
						{{Number(form.amount).toFixed(2)}}万元
					</view>
				</view>
			</template>
			<view class="item">
				<view class="left">
					贷款年限
				</view>
				<view class="middle">
					{{yearArray[form.yearIndex].name}}
				</view>
			</view>

			<view class="item" v-if="type==0||type==2">
				<view class="left">
					利率计算
				</view>
				<view class="middle">
					{{rateTypeList[form.rateTypeIndex].name}}
				</view>
			</view>
			<template v-if="form.rateTypeIndex==0">
				<view class="item">
					<view class="left">
						LPR
					</view>
					<view class="middle">
						4.20%
					</view>
				</view>
				<view class="item">
					<view class="left">
						基点
					</view>
					<view class="middle">
						{{form.point}}‱
					</view>
				</view>
			</template>
			<!-- 商业贷款 -->
			<template v-if="type==0||type==1">
				<view class="item">
					<view class="left">
						{{type==0?'商业贷款总额':'公积金贷款总额'}}
					</view>
					<view class="middle">
						{{(detailObj.loanMoneyTotal/10000).toFixed(2)}}万元
					</view>
				</view>
				<view class="item">
					<view class="left">
						{{type==0?'商业贷款利率':'公积金贷款利率'}}
					</view>
					<view class="middle">
						{{(detailObj.rateNumTotal*100).toFixed(2)}}%
					</view>
				</view>
			</template>
			<!-- 组合贷款 -->
			<template v-if="type==2">
				<view class="item">
					<view class="left">
						商业贷款总额
					</view>
					<view class="middle">
						{{(detailObj.loanMoneyBusiness/10000).toFixed(2)}}万元
					</view>
				</view>
				<view class="item">
					<view class="left">
						商业贷款利率
					</view>
					<view class="middle">
						{{(detailObj.rateNumBusiness*100).toFixed(2)}}%
					</view>
				</view>

				<view class="item">
					<view class="left">
						公积金贷款总额
					</view>
					<view class="middle">
						{{(detailObj.loanMoneyProvident/10000).toFixed(2)}}万元
					</view>
				</view>
				<view class="item">
					<view class="left">
						公积金贷款利率
					</view>
					<view class="middle">
						{{(detailObj.rateNumProvident*100).toFixed(2)}}%
					</view>
				</view>
			</template>

			<view class="item">
				<view class="left">
					{{active==1 ? '首期还款': '每月还款'}}
				</view>
				<view class="middle" style="color: #ff8000;">
					{{monthPay}}元
					<view class="text" @click="gotoResult">
						查看月供数据
					</view>
				</view>

			</view>

		</view>

		<shareButton
			@onShare="onShare"
			:text="'分享房贷计算器'">
		</shareButton>
	</view>
</template>

<script>
	let that = null
	const api = require("@/static/js/api.js")
	const utils = require("@/static/js/utils.js")
	import LoanCaculate from "../components/calculator/LoanCaculate.js"
	import defaultList from '../components/calculator/defaultList.js'
	import shareButton from "@/components/shareButton/shareButton.vue"
	export default {
		components: {},
		data() {
			return {
				id: "",
				pageInit: false,
				loanTypeList: defaultList.loanTypeList,
				calculationTypeList: defaultList.calculationTypeList,

				//首付比例
				percentList: defaultList.percentList,
				// 利率计算方式
				rateTypeList: defaultList.rateTypeList,

				// 利率表
				rateListProvident: defaultList.rateListProvident,
				// 利率表
				rateListBusiness: defaultList.rateListBusiness,

				yearArray: defaultList.yearList,

				form: {},
				type: 0,
				detailObj: {},

				loanMoneyTotal: 0,
				interestTotal: 0,
				rateNumTotal: 0,
				list: [{
						name: '等额本息(元)'
					},
					{
						name: '等额本金(元)'
					},
				],

				loanMoneyTotal: 0,
				interestTotal: 0,

				loanMoneyBusiness: 0,
				rateNumBusiness: 0,

				loanMoneyProvident: 0,
				rateNumProvident: 0,

				months: 0,
				monthPay: 0,
				active: 0,
			}
		},
		onLoad(option) {
			that = this
			// var obj = JSON.parse(decodeURIComponent(option.data));
			console.log("getCalculatorDetail",option)
			this.id = option.id
			this.getCalculatorDetail()
		},

		onReachBottom() {

		},
		methods: {
			getCalculatorDetail(){

				let that = this
				api.getCalculatorDetail({
					param: {
						id: that.id,
					}
				}).then(res => {
					console.log(res)
					if (res.success) {  
						that.setInit(JSON.parse(res.data.data))
						that.pageInit = true
					}
				})
				
			},
			setInit(obj){
				this.form = obj.form
				this.type = obj.type
				
				this.detailObj = obj
				
				var data = this.detailObj
				console.log("setInit", obj)
				if (this.type == 2) {
					this.loanMoneyBusiness = Number(data.loanMoneyBusiness);
					this.loanMoneyProvident = Number(data.loanMoneyProvident);
					this.loanMoneyTotal = this.loanMoneyBusiness + this.loanMoneyProvident; //贷款总价
					this.months = data.months;
					this.rateNumBusiness = Number(data.rateNumBusiness);
					this.rateNumProvident = Number(data.rateNumProvident);
				
				} else {
					this.loanMoneyTotal = data.loanMoneyTotal;
					this.months = data.months;
					this.rateNumTotal = data.rateNumTotal;
				}
				console.log(this.loanMoneyTotal, this.months, this.rateNumTotal)
				this.caculateAcpi(this.active)
			},
			
			setPreList1() {
				let monthPay = LoanCaculate.Acpi(this.rateNumTotal, this.loanMoneyTotal, this.months)
				this.monthPay = monthPay.toFixed(2);
			},

			setPreList2() {
				var firstMonthPay = LoanCaculate.AverageCapital(this.rateNumTotal, this.loanMoneyTotal, this.months, 0)
				this.monthPay = firstMonthPay.toFixed(2);
			},

			setGroupPreList1() {
				// 利息总额
				var monthPayBusiness = LoanCaculate.Acpi(this.rateNumBusiness, this.loanMoneyBusiness, this.months); //商贷月付
				var monthPayProvident = LoanCaculate.Acpi(this.rateNumProvident, this.loanMoneyProvident, this
				.months); //商贷月付
				var monthPayTotal = (monthPayBusiness + monthPayProvident)
				this.monthPay = monthPayTotal.toFixed(2);
			},


			setGroupPreList2() {
				var firstMonthPayBusiness = LoanCaculate.AverageCapital(this.rateNumBusiness, this.loanMoneyBusiness, this
					.months, 0)
				var firstMonthPayProvident = LoanCaculate.AverageCapital(this.rateNumProvident, this.loanMoneyProvident,
					this.months, 0)
				var firstMonthPay = firstMonthPayBusiness + firstMonthPayProvident
				this.monthPay = firstMonthPay.toFixed(2);
			},


			tabsClick(index) {
				this.active = index
				this.caculateAcpi(this.active)
			},

			caculateAcpi(isAcpi) {
				if (!isAcpi) {
					if (this.type==2) {
						this.setGroupPreList1()
					} else {
						this.setPreList1()
					}
				} else {
					if (this.type==2) {
						this.setGroupPreList2()
					} else {
						this.setPreList2()
					}
				}
			},
			gotoResult(){
				uni.navigateTo({
					url: '../result/index?active=' + this.active + '&id=' + this.id
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #f8f8f8;
	}
</style>

<style lang="scss" scoped>
	.headerWrapper {
		display: flex;
		padding: 20rpx;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		width: 750rpx;
		.left {
			font-size: 32rpx;
			font-weight: bold;
			display: flex;
			align-items: center;

			.icon {
				background-color: #177fff;
				width: 15rpx;
				height: 15rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
		}
		.right {
			height: 45rpx;
			background-color: #ddd;
			border-radius: 30rpx;
			overflow: hidden;
			display: flex;
			line-height: 45rpx;
			text-align: center;
			font-size: 22rpx;
			.item{
				height: 100%;
				padding: 0 30rpx;		
				color: #888;
			}
			
			.itemS{
				background-color: #177fff;
				color: #fff;
			}
			.itemN{
				
			}
		}
	}


	.itemContainer {
		width: 750rpx;
		padding: 0rpx 30rpx 30rpx 30rpx;
		background-color: #fff;

		.item {
			width: 100%;
			height: 50rpx;
			display: flex;
			align-items: center;
			color: #222;
			line-height: 50rpx;
			font-size: 24rpx;

			.left {
				margin-left: 20rpx;
				width: 180rpx;
				color: #888;
			}

			.middle {
				width: 400rpx;
				display: flex;
				align-items: center;

				.text {
					margin-left: 30rpx;
					color: #177fff;
				}
			}

			.right {
				margin-left: 30rpx;
			}
		}

		.line {
			height: 1px;
			width: 100%;
			background-color: #f0f0f0;
			margin-top: 15rpx;
		}

		.time {
			width: 100%;
			display: flex;
			align-items: center;
			color: #888;
			font-size: 20rpx;
			height: 80rpx;
			line-height: 80rpx;

			.icon {
				width: 22rpx;
				height: 22rpx;
				margin-right: 10rpx;
				background-image: url(@/static/image/icon_time.png);
			}

			.content {
				color: #222;
			}
		}
	}
</style>